import { useEffect } from 'react';

import { Button, Cascader, Form, Input, Popover, Select, Space } from 'antd';
import { useModel } from '@umijs/max'
import { BigNormalOrgType, editBigNormal, getBigNormalDetail } from './services'
import { useRequest } from 'ahooks';
import { MenuAll, queryCityOptions2 } from '@/services/common';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { REG_EXP } from '@/constants';
import MenuTree from '@/components/MenuTree';
import { enum2options } from '@/utils/enum2options';
import { areaCode2cascaderValue } from '@/utils/common';

const BigNormalPage: React.FC<RoutePageProps> = (props) => {
  const [editForm] = Form.useForm()
  const { runAsync, loading } = useRequest(editBigNormal, {manual: true})
  const { runAsync: getDetail } = useRequest(getBigNormalDetail, {manual: true})
  const cityOptions = useRequest(() => queryCityOptions2(localStorage.Authorization2))
  const { closeCurrentTab } = useModel('global')

  const onFinish = (formValues: any) => {
    runAsync({
      companyId: formValues.companyId,
      companyName: formValues.companyName,
      loginPhone: formValues.loginPhone,
      orgType: formValues.orgType,
      orgCode: formValues.orgCode,
      area: formValues.area[2] || formValues.area[1] || formValues.area[0],
      companyAddress: formValues.companyAddress,
      companyPhone: formValues.companyPhone,
      chiefName: formValues.chiefName,
      chiefPhone: formValues.chiefPhone,
      menus: formValues.menus,
    })
    .then(() => {
      const event = new CustomEvent('refreshBigNormalList')
      window.dispatchEvent(event)
      closeCurrentTab('/bigNormal')
    })
  }

  useEffect(() => {
    const { id } = props.params
    if (id) {
      getDetail({id}).then(res => {
        const { data } = res
        editForm.setFieldsValue({
          companyId: data.id,
          companyName: data.companyName,
          loginPhone: data.loginPhone,
          orgType: data.orgType,
          orgCode: data.orgCode,
          area: areaCode2cascaderValue(data.area),
          companyAddress: data.companyAddress,
          companyPhone: data.companyPhone,
          chiefName: data.chiefName,
          chiefPhone: data.chiefPhone,
          menus: data.menus,
        })
      })
    } else {
      editForm.setFieldsValue({
        companyId: undefined,
        companyName: undefined,
        loginPhone: undefined,
        orgType: BigNormalOrgType.身份证,
        orgCode: undefined,
        area: undefined,
        companyAddress: undefined,
        companyPhone: undefined,
        chiefName: undefined,
        chiefPhone: undefined,
        menus: [],
      })
    }
  }, [props.params.id])
  
  return (
    <div className='container'>
      <div className="card">
        <Form form={editForm} name='editForm' labelCol={{flex: '120px'}} onFinish={onFinish}>
          <Form.Item name='companyId' noStyle>
            <Input placeholder='请输入' hidden />
          </Form.Item>
          <Form.Item name='companyName' label='企业名称' rules={[{required: true, message: '请输入企业名称'}]}>
            <Input placeholder='请输入' style={{width: 320}} />
          </Form.Item>
          <Form.Item label='登录账号' required>
            <Space>
              <Form.Item name='loginPhone' rules={[
                {required: true, message: '请输入手机号'},
                {pattern: REG_EXP.PHONE, message: '请输入正确的手机号'},
              ]} noStyle>
                <Input placeholder='请输入' style={{width: 320}} disabled={props.params.type === 'edit'} />
              </Form.Item>
              <Popover content='默认登录初始密码为‘123456’'>
                <QuestionCircleOutlined />
              </Popover>
            </Space>
          </Form.Item>
          <Form.Item name='orgType' label='证件类型' rules={[{required: true, message: '请选择证件类型'}]}>
            <Select placeholder='请选择' options={enum2options(BigNormalOrgType)} style={{width: 320}} />
          </Form.Item>
          <Form.Item name='orgCode' label='证件号码' rules={[{required: true, message: '请输入证件号码'}]}>
            <Input placeholder='身份证号或组织机构代码' style={{width: 320}} />
          </Form.Item>
          <Form.Item name='area' label='地区' rules={[{required: true, message: '请选择地区'}]}>
            <Cascader
              loading={cityOptions.loading}
              options={cityOptions.data?.data}
              style={{width: 320}}
             
              placeholder='请选择'
              changeOnSelect
            />
          </Form.Item>
          <Form.Item name='companyAddress' label='详细地址' rules={[{required: true, message: '请输入详细地址'}]}>
            <Input placeholder='请输入' style={{width: 320}} />
          </Form.Item>
          <Form.Item name='companyPhone' label='联系电话' rules={[{required: true, message: '请输入联系电话'}]}>
            <Input placeholder='请输入' style={{width: 320}} />
          </Form.Item>
          <Form.Item name='chiefName' label='负责人' rules={[{required: true, message: '请输入负责人'}]}>
            <Input placeholder='请输入' style={{width: 320}} />
          </Form.Item>
          <Form.Item name='chiefPhone' label='负责人电话' rules={[
            {required: true, message: '请输入负责人电话'},
            {pattern: REG_EXP.PHONE, message: '请输入正确的手机号'},
          ]}>
            <Input placeholder='请输入' style={{width: 320}} />
          </Form.Item>
          <Form.Item name='menus' label='菜单权限' rules={[{required: true, message: '请选择菜单权限'}]}>
            <MenuTree all={MenuAll.大客户所有菜单} />
          </Form.Item>
          <Form.Item label=' ' colon={false}>
            <Button type='primary' htmlType='submit' loading={loading}>提交</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default BigNormalPage;
